<template>
  <el-main>
    <div class="up">
      <el-select v-model="status" placeholder="请选择" @change="statusChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="通知" name="message">
        <span slot="label" class="pane-title">通知</span>
        <MessageTable ref="MessageTable" :innerFormat="innerFormat"  />
      </el-tab-pane>

      <el-tab-pane label="公告" name="notice">
        <span slot="label" class="pane-title">公告</span>
        <NoticeTable ref="NoticeTable" :innerFormat="innerFormat" />
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>

import MessageTable from './components/MessageTable/index';
import NoticeTable from './components/NoticeTable/index';

export default {
  name: 'Center',
  data () {
    return {
      // 面板默认打开
      activeName: 'message',
      // 状态选择
      status: '',
       //缓存两个表格的状态选择
      megStatus: '',
      noticeStatus: '',
      // 状态栏设置
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '未读'
        },
        {
          value: '1',
          label: '已读'
        }],
        //数据转换
        innerFormat:function(v){
          return Number(v) !== 0 ? '已读' : '未读'
        }
    };
  },
  components: {
    MessageTable,
    NoticeTable
  },
  created() {
    const activeName = this.$route.query.active
    if(activeName){
      this.activeName = activeName
    }
  },
  methods: {
    statusChange(status) {
      if (this.activeName === 'notice') {
        this.noticeStatus = status
        this.$refs.NoticeTable.queryParams.isRead = status
        this.$refs.NoticeTable.localNoticeList()
      } else {
        this.megStatus = status
        this.$refs.MessageTable.queryParams.status = status
        this.$refs.MessageTable.localMessageList()
      }
    }
  },
  watch: {
    activeName(v, old) {
      if (v === 'notice') {
        this.status = this.noticeStatus
      } else {
        this.status = this.megStatus
      }
    }
  }
};
</script>

<style scoped >
.pane-title {
  display: inline-block;
  width: 100px;
  font-size: 22px;
  line-height: 17px;
  text-align: center;
}

.notice-button {
  display: flex;
  justify-content: space-between;
}

/deep/ .settlement {
  color: #1890ff;
  border: 1px solid #1890ff;
  width: 120px;
}

.up {
  margin-bottom: 24px;
}

/deep/.el-tabs__active-bar {
  height: 6px;
  border-radius: 5px 5px 5px 5px;
}

/deep/ .opertion {
  margin-right: 20px
}

/deep/ table {
  width: 100% !important;
}

/deep/ .pagination-container {
  padding: 0 !important;
}
</style>
